import "./explore.css";
export function Explore() {
  return (
    <>
      <div className="Container">
        <Header></Header>
        <Content></Content>
        <Footer></Footer>
      </div>
    </>
  );
}

function Header() {
  return (
    <>
      <header className="Header">
        <div className="div1">
          <img className="img1" src="/genduo.svg" alt="" />
          <span>Explore</span>
        </div>
        <div className="div2">
          <img className="img2" src="/fangdajing.svg" alt="" />
          <input type="text" placeholder="Search for artist, song or lyrics" />
        </div>
      </header>
    </>
  );
}

function Content() {
  const artistImages = [
    {
      id: 1,
      src: "/myphoto.png",
      alt: "Artist 1",
      singer: "Taylor Swift",
      des: "102 Songs",
    },
    {
      id: 2,
      src: "/myphoto.png",
      alt: "Artist 2",
      singer: "Taylor Swift",
      des: "102 Songs",
    },
    {
      id: 3,
      src: "/myphoto.png",
      alt: "Artist 3",
      singer: "Taylor Swift",
      des: "102 Songs",
    },
    {
      id: 4,
      src: "/myphoto.png",
      alt: "Artist 3",
      singer: "Taylor Swift",
      des: "102 Songs",
    },
  ];
  return (
    <>
      <div className="Content">
        <div className="title">
          <span>POPULAR ARTISTS</span>
          <span style={{ color: "#2294ff", fontSize: "14px" }}>VIEW ALL</span>
        </div>

        <div className="artistList">
          {artistImages.map((item) => (
            <div className="artistItem">
              <img key={item.id} src={item.src} alt={item.alt} />
              <div className="artistName">{item.singer}</div>
              <div
                className="artistDsc"
                style={{ fontSize: "14px", color: "#888" }}
              >
                {item.des}
              </div>
            </div>
          ))}
        </div>
        {/* 分割线 */}
        <div className="divider"></div>

        <div className="title">
          <span>LATEST ALBUM</span>
          <span style={{ color: "#2294ff", fontSize: "14px" }}>VIEW ALL</span>
        </div>

        <div className="albumList">
          {artistImages.map((item) => (
            <div className="albumItem">
              <img key={item.id} src={item.src} alt={item.alt} />
              <div className="albumDes">
                <div className="artistName">{item.singer}</div>
                <div
                  className="artistDsc"
                  style={{ fontSize: "14px", color: "#888" }}
                >
                  {item.des}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

function Footer() {
  const Images = [
    { id: 1, src: "/yinyue.svg" },
    { id: 2, src: "/wenjian.svg" },
    { id: 3, src: "/fangdajing.svg" },
    { id: 4, src: "/wode.svg" },
  ];
  return (
    <>
      <footer className="Footer">
        {Images.map((item) => (
          <img style={{width:"35px", color:'#fff'}} key={item.id} src={item.src}  />
        ))}
      </footer>
    </>
  );
}
